<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-29
 * login.vue
-->
<template>
  <div class="loginBody">
    <header>
      <img class="logo" src="/src/assets/images/logo-a9f5dd6c.jpg">
    </header>
    <div class="center">
      <div class="left">
        <img src="/src/assets/images/bar-d191ea9b.jpg">
      </div>
      <div class="right">

        <div class="box_content">
          <img class="right_logo" src="/src/assets/images/code-7b2156bb.jpg" alt="">
          <div class="box_title">账号登录</div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
            <el-form-item label="" prop="username">
              <el-input size="large" class="input_name" v-model="ruleForm.username" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="" prop="pass">
              <el-input size="large" class="input_pass" type="password" show-password v-model="ruleForm.pass"
                placeholder="请输入密码" />
            </el-form-item>
            <div class="code_box">
              <el-form-item class="code" label="" prop="verifyCode">
                <el-input class="code_input" size="large" v-model="ruleForm.verifyCode" placeholder="请输入验证码" />
              </el-form-item>
              <el-form-item>
                <img @click="switch_code" class="image_size" :src="imageCode">
              </el-form-item>
            </div>
            <el-form-item>
              <el-button @click="submit" class="submit" type="primary">
                登录
              </el-button>

            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <footer>
      北京乐宁科技@2023 京ICP备17033472号-4
    </footer>

  </div>
</template>

<script lang='ts' setup>
import { LoginData } from '../../service/login/type'
import { reactive, ref } from 'vue'
import { getImgCode } from '../../service/login/login';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { onMounted } from 'vue';
const router = useRouter();


const imageCode = ref("");
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<LoginData>({
  username: "",
  pass: "",
  verifyCode: "",
  token: ""
})
const rules = reactive<FormRules<LoginData>>({
  username: [
    { required: true, message: '请输入您的姓名', trigger: 'blur' }
  ],
  pass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  verifyCode: [
    { required: true, message: '请输入正确的验证码', trigger: 'blur' },
  ]
})
//获取图形验证码
const getCode = async () => {
  let res: any = await getImgCode()
  if (res.errCode === 10000) {

    imageCode.value = res.imageCode;
    ruleForm.token = res.token

  }
  console.log(res);
}
//刷新验证码
const switch_code = () => {
  getCode()
}

//提交登录请求
import { useUserStore } from '../../store/index';

const store = useUserStore();
// const checkLogin = async () => {
//   const res: any = await Login(ruleForm);
//   if (res.errCode === 10000) {
//     //登录成功
//     // sessionStorage.setItem("token", res.data.token);
//     // sessionStorage.setItem("menu",JSON.stringify(res.data.menu));
//     store.token = res.data.token;
//     store.menus = res.data.menu;
//     router.push("/index");
//     return;
//   }
//   ElMessage.error(res.errMsg)
//   res.errCode === 15000 && getCode();
// }

const submit = async () => {

  await ruleFormRef.value?.validate(async (valid) => {
        if (valid) {
          store.login(ruleForm).then((res:any)=>{
            if (res.errCode === 10000){
              ElMessage.success("登录成功");
              router.push("/index");
            }
               
            },fail=>{
                ElMessage.error(fail.errMsg);
                fail.errCode === 15000 && getCode();
            });
        }
    })

}



onMounted(() => {
  getCode()
})

</script>
<style scoped lang="less">
.loginBody {
  background: #f7f5f5;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #f7f5f5;

  header {
    height: 100px;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;

    .logo {
      height: 60px;
      width: auto;
      margin-left: 20px;
    }

  }

  footer {
    height: 100px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13rpx;
  }

  .center {
    width: 1190px;
    height: 440px;
    margin: 20px;
    display: flex;

    .left {
      width: 716px;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .right {
      height: 100%;
      flex: 1;
      padding: 0 50px;
      box-sizing: border-box;
      // background: red;
      display: flex;
      flex-direction: column;
      align-items: center;

      .box_content {
        width: 100%;
        height: 100%;
        padding: 0 50px;
        box-sizing: border-box;
        background-color: #fff;
        position: relative;

        .right_logo {
          position: absolute;
          right: 10px;
          top: 10px;
        }

        .box_title {
          font-size: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 50px 0;
        }
      }
    }
  }



  .code_box {
    // background-color: pink;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .code_input {
      width: 120px;
      margin: 0;
    }

    .image_size {
      width: 120px;
      height: 40px;

    }
  }



  .submit {
    width: 275px;
    height: 40px;
  }

}
</style>